import React from 'react';
import classnames from 'classnames';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { ListPage, ShareAuth } from 'weaver-mobile-page';
import { List, Icon, Tools, Button } from 'weaver-mobile';
import { renderLoading } from '../public';
import { toJS } from 'mobx';
import { parseQueryString, TitleUtil } from '../../util';
const getLabel = Tools.getLabel;
const template = {
  default: [
    {
      key: 'col1',
      configs: [
        { key: 'col1_row1', configs: [{ key: 'shareType',style: { display: 'inline' } }] },
        { key: 'col1_row2', configs: [{ key: 'name', style: { display: 'inline' }}] },
        { key: 'col1_row3', configs: [{ key: 'secRange' ,style: { display: 'inline' }}] },
      ],
    },
  ],
};
@withRouter
@inject('communicationStore')
@observer
export default class ParterList extends React.Component {
  static defaultProps = {
    prefixCls: 'cowork-communication-parterList',
  }

  constructor(props) {
    super(props)
  
    this.state = {
      isNoCheck: false,
      isFromCreate: false,
    }
  }

  componentDidMount() {
    const { communicationStore: { parterListStore }, location: { pathname, search }, coworkId } = this.props;
    const { inital } = parterListStore;
    const loc_search = parseQueryString(search);
    const id = (loc_search && loc_search.id) || coworkId || '';
    const params = {
      coworkId: id,
      ...loc_search,
    }
    parterListStore.setStoreState({coworkId: id})
    if(loc_search.table_nocheck) { 
      this.setState({ isNoCheck: true })
    }
    inital(pathname, params)
    // 新建协作特殊处理
    if (pathname.endsWith('createCowork/parterList')) {
      TitleUtil.setTitle(getLabel('524477','请确认协作参与范围'))
      this.setState({ isFromCreate: true })
    }
  }

  componentWillUnmount() {
    const { communicationStore: { parterListStore } } = this.props;
    parterListStore.clear();
    if (this.state.isFromCreate) {
      TitleUtil.setTitle('')
    }
  }

  onBackClick = () => this.props.history.goBack();
  
  getParterList = (datas, parterDelete) => {
    const { communicationStore: { detailStore, onSearch } } = this.props;
    const fields = [];
    datas.forEach((item) => {
      fields.push(<ListPage.Item
        key={item.id}
        data={item}
        template={template}
        withDeleteSwipeAction={false}
        disabled={(item.srcfrom==="2"||item.srcfrom==="3") ? true : null}
        showDelete={!this.state.isNoCheck}
        // onClick={(rowData) => {rowData.type =="1" && this.openHrmCard(rowData.id)}}
        onDelete={() => { 
          parterDelete({...item, typeId: detailStore.editTypeId}, () => {
            onSearch();
            detailStore.getShareConditionStrList('all');
          })
        }}
      />);
    })
    return fields;
  }

  render(){
    const { prefixCls, communicationStore: { parterListStore, detailStore, onSearch } } = this.props;
    const { shareAuthRoute, shareConditionInfo, parterListChange, parterlist, parterDelete, parterlistLoading} = parterListStore;
    const datas = parterlist && toJS(parterlist.data);
    return (
      <List className={prefixCls}>
        {(shareAuthRoute && !this.state.isNoCheck) && (
          <ShareAuth
            customType={{
              skipEntry: true,
              conditionData: toJS(shareConditionInfo),
            }}
            store={shareAuthRoute}
            onChange={(data) => {
              parterListChange({...data, typeId: detailStore.editTypeId}, () => {
                onSearch();
                detailStore.getShareConditionStrList('all');
              })
            }}
          >
            <List.Item className={`${prefixCls}-add`}>
              <Icon type='plus' size='xxs'/>
              {getLabel(386111, '添加参与范围')}
            </List.Item>
          </ShareAuth>
        )}
        {parterlistLoading ? renderLoading : (
          <div 
          className={classnames(`${prefixCls}-content`, !(shareAuthRoute && !this.state.isNoCheck) ? 'notadd' : '', this.state.isFromCreate ? `${prefixCls}-createpage`:"")}>
            {this.getParterList(datas, parterDelete)}
          </div>
        )}
        {
          this.state.isFromCreate ? 
            <Button className={`${prefixCls}-goback`} type='primary' onClick={this.onBackClick}>{getLabel(826,"确定")}</Button> :
            null
        }
      </List>
    );
  }
}